<template>
	<view class="leave_box">
		<navTitle :titleRight="''" :title="'消息'"></navTitle>
		<view class="msg-box">
			<view v-for="(item, index) in messageList" :key="index" class="msg-li" @tap="handleMS(item)">
				<image :src="item.avatar" alt="">
					<view class="l-r">
						<view class="p-name">
							<view>{{ item.name }}</view>
							<view class="p-n-time">{{ formatDate(item.datetime) }}</view>
						</view>
						<view class="p-desc">
							<view class="p-d-l">{{ item.newinfo }}</view>
							<view class="p-d-r" v-if="item.noreadcount>0"><span>{{ item.noreadcount }}</span></view>
						</view>
					</view>
			</view>
		</view>
		<!-- 面试邀请弹窗 -->
		<u-popup :show="showInvite" mode="center" border-radius="14" :mask-close-able="true" :mask="true">
			<view class="invite_con">
				<view class="i_title">面試邀請</view>
				<view class="i_p">公司</view>
				<view class="i_txt">瑞港工程有限公司</view>
				<view class="i_p">職位</view>
				<view class="i_txt">‌‌工程部經理</view>
				<view class="i_p">面試時間</view>
				<view class="i_txt">2024-10-20 10:30</view>
				<view class="btn-i" @tap="interview()">接受面試</view>
				<view class="i_span" @tap="interviewDtaile()">查看詳情</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		multiStatus,
		indexgetmyxinxinuserlist
	} from '../../utils/api';
	import navTitle from './../boss/components/nav-title.vue';
	export default {
		components: {
			navTitle
		},
		data() {
			return {
				showInvite: false,
				showCalendar: false,
				reason: '',
				stepsCurrent: -1,
				messageList: [],
				steps: [{
						name: '直接主管：'
					},
					{
						name: '總經理：'
					}
				],
				vacationIndex: 0,
				vacationList: ['事假', '調休', '病假', '年假', '產假', '陪產假', '婚假', '例假', '喪假'],
				startDate: '',
				endDate: '',
			};
		},
		props: {
			couponList: {}
		},
		computed: {
			reasonLen() {
				return this.reason.length
			},
			timeDays() {

			}
		},
		onShow() {
			this.mesList()
		},
		methods: {
			interview()
			{
				let res =  multiStatus({interview_id:this.interview_id,status:1})
			},
			interviewDtaile()
			{
				uni.navigateTo({
				  url: '/pages/job/interviewAccept'
				});
			},
			formatDate(dateStr) {
				const now = new Date();

				// 将传入的日期字符串转换为 Date 对象
				const targetDate = new Date(dateStr.replace(' ', 'T')); // 处理日期字符串格式 (2024-12-31T15:17:49)

				// 计算时间差（以天为单位）
				const diffTime = now - targetDate;
				const diffDays = Math.floor(diffTime / (1000 * 60 * 60 * 24)); // 转换为天数差

				// 如果是今天
				if (diffDays === 0) {
					const hours = targetDate.getHours();
					const minutes = targetDate.getMinutes();
					return `${hours}:${minutes < 10 ? '0' : ''}${minutes}`;
				}

				// 如果是昨天
				if (diffDays === 1) {
					return `昨天`;
				}

				// 如果是三天以上
				if (diffDays >= 2) {
					const month = targetDate.getMonth() + 1; // 月份是从0开始的
					const day = targetDate.getDate();
					return `${month}月${day}号`;
				}

				return '';
			},

			async mesList() {
				let res = await indexgetmyxinxinuserlist()
				this.messageList = res.data
				console.log(res, 'lll')
			},
			handleMS(parems) {
				uni.navigateTo({
				  url: '/pages/job/ChatRoom?fromuid=' + parems.fromuid
				});
				// this.$router.push({
				// 	path: '/pages/job/ChatRoom',
				// 	query: parems
				// });
			},
			submitApply() {
				uni.showModal({
					title: '提示',
					content: `確定提交請假申請嗎？`,
					success: res => {
						console.log('999')
					}
				});
			},
			changeCalendar(e) {
				this.startDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			changeCalendarEnd(e) {
				this.endDate = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`
			},
			changeVacationType() {
				let that = this
				uni.showActionSheet({
					itemList: that.vacationList,
					title: '請假類型',
					success: ({
						tapIndex
					}) => {
						this.vacationIndex = tapIndex
					},
					fail: (error) => {}
				})
			},
		}
	};
</script>
<style lang="scss" scoped>
	.leave_box {
		width: 100%;
		height: 100vh;
		// overflow-y: scroll;
		background: #fff;
	}

	.msg-box {
		width: calc(100% - 30px);
		margin: 0 auto;
	}

	.msg-li {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 10px 0;
		border-bottom: 0.5px solid #F3F3F3;

		image {
			display: block;
			width: 52px;
			height: 52px;
		}

		.l-r {
			width: calc(100% - 62px);
			font-size: 14px;
			color: #999999;
			line-height: 18px;
		}
	}

	.p-name {
		font-size: 16px;
		color: #333333;
		line-height: 18px;
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.p-n-time {
		font-size: 12px;
		color: #999999;
		line-height: 14px;
	}

	.p-desc {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.p-d-l {
		width: calc(100% - 42px);
	}

	.p-d-r {
		span {
			display: inline-block;
			padding: 3px 5px;
			background-color: #F74140;
			color: #fff;
			border-radius: 8.5px;
			line-height: 12px;
			font-weight: 500;
			font-size: 11px;
			color: #FFFFFF;
		}
	}

	.invite_con {
		width: 325px;
		height: 382px;
		background-image: url('./../../static/images/job/icon_job_invite.png');
		background-size: contain;
		background-repeat: no-repeat;
		text-align: center;
		position: relative;
	}

	.i_title {
		width: 100%;
		height: 20px;
		font-family: SourceHanSansCN, SourceHanSansCN;
		font-weight: bold;
		font-size: 20px;
		color: #1C7AF7;
		line-height: 20px;
		margin: 12px 0 0;
	}

	.i_p {
		margin: 22px 0 10px;
		height: 18px;
		font-weight: 500;
		font-size: 18px;
		color: #333333;
		line-height: 18px;
	}

	.i_txt {
		height: 18px;
		font-weight: 500;
		font-size: 15px;
		color: #838383;
		line-height: 18px;
		margin-top: 10px;
	}

	.btn-i {
		width: 200px;
		height: 44px;
		border-radius: 8px;
		background: #fff;
		line-height: 44px;
		text-align: center;
		position: absolute;
		bottom: 51px;
		left: calc(50% - 100px);
		font-weight: 600;
		font-size: 15px;
		color: #1C7AF7;
	}

	.i_span {
		position: absolute;
		bottom: 16px;
		left: 0;
		right: 0;
		text-align: center;
		height: 20px;
		font-size: 14px;
		color: #FFFFFF;
		line-height: 20px;
	}
</style>